<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>唯品会购物袋</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			a {
				text-decoration: none;
				color: #1D94D1;
			}
			.fl {
				float: left;
			}
			.fr{
				float: right;
			}
			.head-logo {
				height: 100px;
				line-height: 100px;
				
			
			}
			
			.head-logo-inner {
				width: 1000px;
				margin: 0 auto;	
			}
			
			.head-inner-l {
				height: 100px;
				margin-top: 20px;
				/*border: solid 1px black;*/
				line-height: 100px;
			}
			
			.head-inner-l a {
				display: inline-block;
			}
			
			.gouwudai {
				margin-top: 50px;
				width: 106px;
				height: 34px;
				text-align: center;
				line-height: 34px;
				background-color: #cdcdcd;
				border: solid 1px #cdcdcd;
				position: relative;
				
			}
			
			.gouwudai-ko {
				width: 103px;
				height: 2px;
				border: solid 1px white;
				position: absolute;
				top: -2px;
				left: 215px;
				background-color: white;
			}
			
			.daizi {
				width: 17px;
				height: 17px;
				display: inline-block;
				/*border: solid 1px blue;*/
				position: relative;
				top: 3px;
				background-image: url(img/sprites-hash-9b207a41.png);
				background-position: -91px -208px;
			}
			
			.gouwudai-nei {
				width: 320px;
				height: 70px;
				line-height: 70px;
				border: solid 1px #cdcdcd;
				text-align: center;
				position: absolute;
				top: 35px;
				left: -215px;
				display: none;
				background-color: white;
				z-index: 10;
			}
			
			.gouwudai:hover {
				background-color: white;
			}
			
			.gouwudai:hover .gouwudai-nei {
				display: block;
			}
			
			.sousuo {
				margin-top: 18px;
				position: relative;
			}
			
			.sousuo-tu {
				width: 18px;
				height: 18px;
				position: absolute;
				top: 40px;
				left: 320px;
				background-image: url(img/sprites-hash-9b207a41.png);
				background-position: -72px -208px;
			}
			
			.sousuo-k {
				width: 350px;
				height: 40px;
				margin-right: 30px;
				border: 1px solid;
				border-radius: 4px;
			}
			.gwd {
				margin: 0 auto;
				clear: both;
			}
			
			.biaoti {
				margin: 0 auto;
				width: 960px;
				height: 40px;
				line-height: 40px;
				border: solid 1px #E0E0E0;
				border-left: solid 3px #D80B8C;
				background-color: #F9F9F9;
			}
			
			
			
			.biaoti ul {
				list-style-type: none;
				font-size: 12px;
			}
			
			.ziying {
				width: 412px;
				margin-left: 10px;
			}
			
			.wei {
				color: #D80B8C;
				font-size: 20px;
				font-weight: bold;
			}
			
			.danjia {
				width: 140px;
				text-align: center;
			}
			
			.xiaoji {
				width: 150px;
				text-align: center;
			}
			
			.caozuo {
				width: 105px;
				text-align: center;
			}
			
			.shangpin {
				margin: 0 auto;
				width: 932px;
				border: solid 1px #E0E0E0;
				border-top: 0;
				padding: 20px 15px;
				font-size: 12px;
			}
			
			.gao {
				height: 100px;
			}
			
			#biaoge {
				width: 932px;
				font-size: 12px;
			}
			
			.renxuan {
				background-color: #FF9933;
				color: white;
				margin: 0 10px;
				padding: 2px 10px;
				border-radius: 3px;
			}
			
			.thead {
				background-color: #FFEFDD;
				height: 40px;
			}
			
			tbody {
				background-color: #FFFAF5;
			}
			
			.xihuan a {
				color: black;
			}
			
			.xihuan a:hover {
				color: #D80B8C;
			}
			
			.anniu {
				background-color: #F9F9F9;
				border: none;
				outline: none;
			}
			
			.shanchu {
				color: black;
			}
			
			.tfoot {
				text-align: center;
			}
			
			.heji {
				margin-top: 50px;
				border-top: solid 1px #E0E0E0;
				text-align: right;
			}
			
			.mowei {
				width: 965px;
				height: 50px;
				margin: 0 auto;
				text-align: right;
			}
			
			.jiesuan {
				width: 256px;
				line-height: 50px;
				text-align: center;
				color: white;
				font-size: 28px;
				background-color: #D80B8C;
			}
			#jj{
				font-size: 20pxxcv;
			}
			
			.zz {
				width: 677px;
				height: 50px;
				line-height: 50px;
				padding-right: 30px;
				background-color: #F3F3F3;
				border: solid 1px #E2E1E1;
			}
			.weibu {
				height: 477px;
				background-color: #F5F5F5;
				margin-top: 100px;
				clear: both;
			}
			
			.center-4 {
				width: 960px;
				margin: 0 auto;
			}
			
			.daxiao {
				width: 96px;
				height: 105px;
			}
			
			.daxiao2 {
				width: 58px;
				height: 75px;
				margin: 30px 19px 0 19px;
				background-image: url(img/tb.png);
			}
			
			.biao2 {
				background-position-x: 10.7%;
			}
			
			.biao3 {
				background-position-x: 21.4%;
			}
			
			.biao4 {
				background-position-x: 32.3%;
			}
			
			.biao5 {
				background-position-x: 42.8%;
			}
			
			.biao6 {
				background-position-x: 53.8%;
			}
			
			.biao7 {
				background-position-x: 64.7%;
			}
			
			.biao8 {
				background-position-x: 75.5%;
			}
			
			.biao9 {
				background-position-x: 86.2%;
			}
			
			.biao10 {
				background-position-x: 97%;
			}
			
			.dx {
				width: 162px;
				margin-top: 30px;
				border-right: 1px solid #B5B5B5;
			}
			
			.f-style {
				font-size: 12px;
				color: #B5B5B5;
				line-height: 25px;
				text-indent: 2em;
			}
			
			.bold {
				color: #4D4D4D;
				font-weight: bold;
			}
			
			.vph {
				width: 136px;
				margin-top: 30px;
			}
			
			.vipewm {
				width: 100px;
				height: 100px;
				margin: 0 22px;
			}
			
			.indent {
				text-indent: 1.5em;
			}
			
			.p_style {
				width: 960px;
				line-height: 20px;
				font-size: 12px;
				text-align: center;
			}
			
			.bgcolor {
				background-color: #F10180;
				color: white;
				margin: 20px 0;
			}
			
			.p_style a {
				color: white;
				padding: 0 3px;
			}
			
			.bgcolor a:hover {
				color: #B5B5B5;
			}
			
			.bgcolor2 {
				color: #4D4D4D;
			}
			
			.bgcolor2 a:hover {
				color: #F10180;
			}
			
			.bgcolor2 a {
				color: black;
			}
			
			.dx dd a:hover {
				color: #F00581
			}
		</style>
	</head>

	<body>
		<div class="head-logo">
			<div class="head-logo-inner">
				<div class="head-inner-l fl">
					<a href=""><img src="img/f7a419fd677b924db63312c87d0ae100.png" /></a>
				</div>
				<div class="head-inner-l fl">
					<a href=""><img src="img/20171226183747.png" /></a>
				</div>
				<div class="head-inner-l fl">
					<a href=""><img src="img/20171226183727.png" /></a>
				</div>
				<div class="head-inner-l fl">
					<a href=""><img src="img/20171226183754.png" /></a>
				</div>

				<div class="gouwudai fr">

					<a href="">
						<div class="daizi"></div>购物袋(0)</a>
					<div class="gouwudai-nei">
						<div class="gouwudai-ko">

						</div>
						<p>好像还没登录
							<a href="">马上登录</a>查看购物袋</p>
					</div>
				</div>

				<div class="sousuo fr">
					<div class="sousuo-tu">

					</div>
					<input type="text" id="" value="" placeholder="买件冬装好过年~" class="sousuo-k" />
				</div>
			</div>
		</div>
		<div class="gwd">
			<div class="biaoti">
				<ul>
					<li class="fl ziying"><span class="wei">唯品自营</span></li>
					<li class="fr danjia">单价</li>
					<li class="fr danjia">数量</li>
					<li class="fr xiaoji">小计</li>
					<li class="fr caozuo">操作</li>
				</ul>
			</div>
			<div class="shangpin">
				<table border="0" cellspacing="0" cellpadding="0" id="biaoge">
					<thead>
						<tr>
							<td colspan="5" class="thead"><span class="renxuan">任选</span>在购1件可满足399元任选2件，上不封顶&nbsp;&nbsp;
								<a href="">去凑单&gt;&gt;</a>
							</td>
						</tr>
					</thead>
					<tbody>
						<!--<tr>
							<td class="xihuan ziying"><img src="../../唯品会/img/02-beauty.jpg" / class="fl" width="58px" height="74px">
								<p>
									<a href="">植美村ZMC化妆品专场 - 植美村ZMC 霓裳舞抿<br />唇口红（花瓣橙） 唇膏 润唇 <br /></a>尺码：4.2g</p>
							</td>
							<td class="danjia">69</td>
							<td class="danjia"><input type="button" id="" value="－" class="anniu" /><input type="text" id="" value="1" size="1" style="text-align: center;" /><input type="button" name="" id="" value="＋" class="anniu" /></td>
							<td class="xiaoji">69</td>
							<td class="caozuo">
								<input type="button" name="" id="" value="删除" class="anniu" />
							</td>
						</tr>-->

						<tr>
							<td colspan="5" class="tfoot"><input type="button" id="" value="添加" onclick="tianjia()" /></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="shangpin">
				<span class="renxuan">运费</span>本组商品以免运营费。
			</div>
			<div class="shangpin heji" id="jj">
				合计：￥000
			</div>
			<div class="mowei">
				<div class="fl zz">
					<p>请在倒计时<span id="daojishi">60</span>结束前结算</p>
				</div>
				<div class="fl jiesuan" id="jiesuan">
					<a href="" style="color: white">立即结算</a>
				</div>
			</div>
		</div>
		
		
		<div class="weibu">
			<div class="center-4">
				<div class="daxiao fl">
					<div class="daxiao2 biao1"></div>
				</div>
				<div class="daxiao fl">
					<div class="daxiao2 biao2"></div>
				</div>
				<div class="daxiao fl">
					<div class="daxiao2 biao3"></div>
				</div>
				<div class="daxiao fl">
					<div class="daxiao2 biao4"></div>
				</div>
				<div class="daxiao fl">
					<div class="daxiao2 biao5"></div>
				</div>
				<div class="daxiao fl">
					<div class="daxiao2 biao6"></div>
				</div>
				<div class="daxiao fl">
					<div class="daxiao2 biao7"></div>
				</div>
				<div class="daxiao fl">
					<div class="daxiao2 biao8"></div>
				</div>
				<div class="daxiao fl">
					<div class="daxiao2 biao9"></div>
				</div>
				<div class="daxiao fl">
					<div class="daxiao2 biao10"></div>
				</div>
				<dl class="dx fl">
					<dt class="f-style bold">服务保证</dt>
					<dd class="f-style">
						<a href="#">▪&nbsp;正品保证</a>
					</dd>
					<dd class="f-style">
						<a href="#">▪&nbsp;7天无理由放心退</a>
					</dd>
					<dd class="f-style">
						<a href="#">▪&nbsp;退货返运费</a>
					</dd>
					<dd class="f-style">
						<a href="#">▪&nbsp;7×15小时客服服务</a>
					</dd>
					<dd class="f-style">
						<a href="#">▪&nbsp;7天无理由随心换</a>
					</dd>
				</dl>
				<dl class="dx fl">
					<dt class="f-style bold">服务保证</dt>
					<dd class="f-style ">
						<a href="#">▪&nbsp;正品保证</a>
					</dd>
					<dd class="f-style">
						<a href="#">▪&nbsp;7天无理由放心退</a>
					</dd>
					<dd class="f-style">
						<a href="#">▪&nbsp;退货返运费</a>
					</dd>
					<dd class="f-style">
						<a href="#">▪&nbsp;7×15小时客服服务</a>
					</dd>
					<dd class="f-style">
						<a href="#">▪&nbsp;7天无理由随心换</a>
					</dd>
				</dl>
				<dl class="dx fl">
					<dt class="f-style bold">服务保证</dt>
					<dd class="f-style">
						<a href="#">▪&nbsp;正品保证</a>
					</dd>
					<dd class="f-style">
						<a href="#">▪&nbsp;7天无理由放心退</a>
					</dd>
					<dd class="f-style">
						<a href="#">▪&nbsp;退货返运费</a>
					</dd>
					<dd class="f-style">
						<a href="#">▪&nbsp;7×15小时客服服务</a>
					</dd>
					<dd class="f-style ">
						<a href="#">▪&nbsp;7天无理由随心换</a>
					</dd>
				</dl>
				<dl class="dx fl">
					<dt class="f-style bold">服务保证</dt>
					<dd class="f-style">
						<a href="#">▪&nbsp;正品保证</a>
					</dd>
					<dd class="f-style">
						<a href="#">▪&nbsp;7天无理由放心退</a>
					</dd>
					<dd class="f-style ">
						<a href="#">▪&nbsp;退货返运费</a>
					</dd>
					<dd class="f-style">
						<a href="#">▪&nbsp;7×15小时客服服务</a>
					</dd>
					<dd class="f-style">
						<a href="#">▪&nbsp;7天无理由随心换</a>
					</dd>
				</dl>
				<dl class="dx fl">
					<dt class="f-style bold">服务保证</dt>
					<dd class="f-style">
						<a href="#">▪&nbsp;正品保证</a>
					</dd>
					<dd class="f-style ">
						<a href="#">▪&nbsp;7天无理由放心退</a>
					</dd>
					<dd class="f-style ">
						<a href="#">▪&nbsp;退货返运费</a>
					</dd>
					<dd class="f-style ">
						<a href="#">▪&nbsp;7×15小时客服服务</a>
					</dd>
					<dd class="f-style ">
						<a href="#">▪&nbsp;7天无理由随心换</a>
					</dd>
				</dl>
				<dl class="vph fl">
					<dt class="f-style bold">唯品会APP二维码</dt>
					<img src="img/20171226112740.png" class="vipewm " />
					<dt class="f-style bold indent">下载唯品会移动APP</dt>
				</dl>
				<p class="p_style fl bgcolor ">
					<a href="#">关于我们</a>|
					<a href="#">About us</a>|
					<a href="#">Investr Relations</a>|
					<a href="#">媒体报道</a>|
					<a href="#">品牌招商</a>|
					<a href="#">隐私条款</a>|
					<a href="#">唯品诚聘</a>|
					<a href="#">365爱心基金</a>|
					<a href="#">唯品卡</a>|
					<a href="#">联系我们</a>
				</p>
				<p class="p_style bgcolor2">Copyright © 2008-2017 vip.com，All Rights Reserved 使用本网站即表示接受
					<a href="#">唯品会用户协议</a>。版权所有
					<a href="#">广州唯品会信息科技有限公司</a><br />
					<a href="#">粤公网安备 44010302111111号</a>
					<a href="#">粤ICP备08114786号</a>
					<a href="#">ICP经营许可证：粤B2-20080329</a>
					<a href="#">网络文化经营许可证：粤网文〔2015〕1528-229</a><br />
					<a href="#">自营主体经营证照</a>
					<a href="#">风险监测信息</a>
					<a href="#">互联网药品交易服务资格证（粤C20140002）</a>
				</p>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var tab = document.getElementById("biaoge");
		//增加
		function tianjia() {
			var tr = tab.insertRow(tab.rows.length - 1); //insertRow插入一个新行
			var td1 = tr.insertCell(0); //insertCell插入一格
			td1.setAttribute("class", "xihuan ziying gao")
			td1.innerHTML = '<img src="img/02-beauty.jpg" / class="fl" width="58px" height="74px"><p><a href="">植美村ZMC化妆品专场 - 植美村ZMC 霓裳舞抿<br />唇口红（花瓣橙） 唇膏 润唇 <br /></a>尺码：4.2g</p>';
			var td2 = tr.insertCell(1);
			td2.setAttribute("class", "danjia gao")
			td2.innerHTML = parseInt(Math.random() * 1000 + 10);
			var td3 = tr.insertCell(2);
			td3.setAttribute("class", "danjia gao")
			td3.innerHTML = '<input type="button" id="" value="－" class="anniu" onclick="jian(this)"/><input type="text" id="" value="1" size="1" style="text-align: center;" /><input type="button" name="" id="" value="＋" class="anniu" onclick="jia(this)"/>';
			var td4 = tr.insertCell(3);
			td4.setAttribute("class", "xiaoji gao")
			td4.innerHTML = td2.innerHTML;
			var td5 = tr.insertCell(4);
			td5.setAttribute("class", "caozuo gao")
			td5.innerHTML = '<input type="button" name="" id="" value="删除" class="anniu" onclick="del(this)"/>';
			heeji();
			sun = td4.innerHTML * 1;

		}
		//合计
		function heeji() {
			var sum = 0;
			for(i = 0; i < tab.children[1].children.length - 1; i++) {
				sum += tab.children[1].children[i].children[3].innerHTML * 1
			}
			document.getElementById("jj").innerHTML = '合计' + ':' + '￥' + sum;
		}
		//删除
		function del(t) {
			var iner = t.parentNode.parentNode.rowIndex; //rowIndex当前行的索引
			tab.deleteRow(iner)
			heeji();
		}
		//加
		function jia(t) {
			t.parentNode.children[1].value++;
			var ss = t.parentNode.parentNode.cells;
			var danjia = ss[1].innerHTML;
			ss[3].innerHTML = danjia * t.parentNode.children[1].value;
			heeji();
		}
		//减
		function jian(t) {
			if(t.parentNode.children[1].value > 1) {
				t.parentNode.children[1].value--;
				var ss = t.parentNode.parentNode.cells;
				var danjia = ss[1].innerHTML;
				ss[3].innerHTML = danjia * t.parentNode.children[1].value;
			}
			heeji();
		}
		
	    var time =document.getElementById("daojishi").innerHTML ;
			id = setInterval(function() {
			document.getElementById("daojishi").innerHTML = time;
				time--;
				if(time < 0) {
					clearInterval(id);
					document.getElementById("jiesuan").innerHTML="不能结算"
				}
			},1000)
	</script>

</html>